<template>
    <a-row>
        <a-form :form="form" @submit="save">
            <a-card title="基本信息">
                <a-col span="24">
                    <a-form-item label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['name', {rules: [{required: true, message: '名称必填'}]}]"></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item label="类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['project', 
                            {
                                initialValue: '1',
                                rules: [{required: true, message: '请选择类型'}]
                            }
                        ]" @change="typeSelect" :disabled='project_is_show'>
                            <a-select-option value="1">
                                周期性
                            </a-select-option>
                            <a-select-option value="2">
                                临时性
                            </a-select-option>
                            <a-select-option value="3">
                                押金性
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                 <a-col span="24">
                    <a-form-item label="保留小数位数" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input type="number" placeholder="请输入备注" v-decorator="['dec_num',{initialValue: '2',rules: [{required: true, message: '请输入备注'}]}]"></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item label="小数取舍方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['dec_type', 
                            {
                                initialValue: '1',
                                rules: [{required: true, message: '请选择小数取舍方式'}]
                            }
                        ]">
                            <a-select-option value="1">
                                只舍不入
                            </a-select-option>
                            <a-select-option value="2">
                                四舍五入
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item label="计算精度" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['money_type', 
                            {
                                initialValue: '1',
                                rules: [{required: true, message: '请选择计算精度'}]
                            }
                        ]">
                            <a-select-option value="1">
                                元
                            </a-select-option>
                            <a-select-option value="2">
                                角
                            </a-select-option>
                            <a-select-option value="3">
                                分
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入备注" v-decorator="['remarks']"></a-input>
                        <a-input type="hidden" v-decorator="['id', {
                                    initialValue: '0'
                                }]"></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24" v-if="isShow == false">
                    <a-form-item :wrapper-col="{offset: 8}">
                        <a-button type="primary" html-type="submit">
                            保存并返回
                        </a-button>
                        <a-button html-type="submit" style="margin-left: 20px;" @click="back">
                            返回
                        </a-button>
                    </a-form-item>
                </a-col>
            </a-card>
            <br>
            <a-card title="周期性设置" v-if="isShow">
                <a-row>
                    <p class="form_title">滞纳金设置</p>
                </a-row>
                <a-row>
                    <a-col span="24">
                        <a-form-item label="滞纳金开始计算时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-radio-group name="radioGroup" v-decorator="['late_time']">
                                <a-radio :value="1">账单开始时间</a-radio>
                                <a-radio :value="2">账单结束时间</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="天数" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-col span="5">
                                <a-input type="number" v-decorator="['late_day', {
                                    initialValue: '0'
                                }]"></a-input>
                            </a-col>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="收取比例（每天）" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-col span="5">
                                <a-input-number
                                    :min="0"
                                    :max="100"
                                    :formatter="value => `${value}%`"
                                    :parser="value => value.replace('%', '')"
                                    v-decorator="['late_pro', {
                                        initialValue: '0'
                                    }]"
                                />
                            </a-col>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row  style="display:none">
                    <p class="form_title">其它设置</p>
                </a-row>
                <a-row style="display:none">
                    <a-col span="24">
                        <a-form-item label="当费用不足一个周期时" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-radio-group name="radioGroup" v-decorator="['no_price']">
                                <a-radio :value="1">按周期计算</a-radio>
                                <a-radio :value="2">按实际天数计算</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="开启损耗" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-radio-group name="radioGroup" :defaultValue="1">
                                <a-switch :checked="is_open" @change="openMethods" />
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col span="24" v-if="is_open">
                        <a-form-item label="损耗计算方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-radio-group name="radioGroup" @change="checkStyle">
                                <a-form-item>
                                    <a-radio :value="1">固定值</a-radio>
                                    <a-input style="width: 30%;" v-if="fixedValue" v-decorator="['open_fix']"></a-input>
                                </a-form-item>
                                <a-form-item>
                                    <a-radio :value="2">按用量的百分比</a-radio>
                                    <a-input-number
                                        :min="0"
                                        :max="100"
                                        :formatter="value => `${value}%`"
                                        :parser="value => value.replace('%', '')"
                                        style="width: 30%;"
                                        v-if="perValue"
                                        v-decorator="['open_per']"
                                    />
                                </a-form-item>  
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="当费用不足一个周期时" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-radio-group name="radioGroup" v-decorator="['default_week']">
                                <a-radio :value="1">当期收当期</a-radio>
                                <a-radio :value="2">当期收上期</a-radio>
                                <a-radio :value="3">当期收下期</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item :wrapper-col="{offset: 8}">
                            <a-button type="primary" html-type="submit">
                                保存并返回
                            </a-button>
                            <a-button html-type="submit" style="margin-left: 20px;" @click="back">
                                返回
                            </a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-card>
        </a-form>
    </a-row>
</template>
<script>
import { saveTollProject,getTollProject } from '@/api/cashier'
import { mapGetters } from 'vuex'

export default {
    name: 'toll_project_add',
    data() {
        return {
            form: this.$form.createForm(this),
            labelCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            project_is_show:false,
            is_open: false,
            fixedValue: false,
            perValue: false,
            isShow: true
        }
    },
    mounted() { 
         if(this.$route.params.id!='add') {
             getTollProject({token:this.token(),id:this.$route.params.id}).then(res=>{
                  if(res.code === 0){

                        let {id, name,project,dec_num,dec_type,money_type,remarks,late_time,late_day,late_pro,no_price,open_fix,default_week } = res.data;
                        if(project != 1) {
                            this.isShow = false
                        } else {
                            this.isShow = true
                        }
                        this.project_is_show=true
                        this.form.setFieldsValue({id,name,project:String(project),dec_num,dec_type:String(dec_type),money_type:String(money_type),remarks,late_time,late_day,late_pro,no_price,open_fix,default_week})
                  }else this.$message.warning(msg);
                
             })
         }
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        openMethods() {
            this.is_open = !this.is_open
            if(this.is_open == false) {
                this.perValue = false
                this.fixedValue = false
            }
        },
        checkStyle(value) {
            if(value.target.value == 1) {
                this.perValue = false
                this.fixedValue = true
            } else {
                this.perValue = true
                this.fixedValue = false
            }
        },
        back(e) {
             e.preventDefault();
            this.$router.go(-1)
        },

        // 保存数据
        save(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    saveTollProject(Object.assign(values,{token:this.token()})).then(res => {
                        if(res.code == 0) {
                            this.$notification.success({
                                message: '成功',
                                description: res.msg
                            })
                            setTimeout(() => {
                                this.$router.push({name: 'charge_toll_index'})
                            }, 1000)
                        } else {
                            this.$notification['error']({
                                message: '错误',
                                description: res.msg,
                                duration: 4
                            })
                        }
                        
                    }).catch(err => {
                        this.$notification['error']({
                            message: '错误',
                            description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                            duration: 4
                        })
                    })
                }
            })
        },
        typeSelect(value) {
            // console.log(value)
            if(value != 1) {
                this.isShow = false
            } else {
                this.isShow = true
            }
        }
    }
}
</script>
<style scoped>
    .form_title {
        margin-left: 200px;
        padding-left: 10px;
        font-size: 16px;
        border-left: 6px solid #2ecc71;
    }
</style>